<!DOCTYPE html>
<html>
<head>
    <title>BootstrapValidator demo</title>

    <link rel="stylesheet" href="../../vendor/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="../../dist/css/formValidation.css"/>

    <script type="text/javascript" src="../../vendor/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../../vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../dist/js/formValidation.js"></script>
    <script type="text/javascript" src="../../dist/js/framework/bootstrap.js"></script>
    <script type="text/javascript" src="../../dist/js/language/vi_VN.js"></script>
    <script type="text/javascript" src="../../dist/js/language/fr_FR.js"></script>
    <script type="text/javascript" src="../../src/js/addon/multilingual.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2">
                <div class="page-header">
                    <h2>multilingual add-on</h2>
                </div>

                <p>
                    <button type="button" class="btn btn-primary setLocaleButton" data-locale="en_US">Use default (English) package</button>
                    <button type="button" class="btn btn-default setLocaleButton" data-locale="vi_VN">Use Vietnamese package</button>
                    <button type="button" class="btn btn-default setLocaleButton" data-locale="fr_FR">Use French package</button>
                </p>

                <form id="defaultForm" method="post" class="form-horizontal" action="/demo/target.php">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Username</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" name="username" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">Email address</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" name="email" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">Password</label>
                        <div class="col-sm-5">
                            <input type="password" class="form-control" name="password" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">Gender</label>
                        <div class="col-sm-5">
                            <div class="radio">
                                <label>
                                    <input type="radio" name="gender" value="male" /> Male
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="gender" value="female" /> Female
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="gender" value="other" /> Other
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">Date of birth</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" name="birthday" placeholder="YYYY/MM/DD" />
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-9 col-sm-offset-3">
                            <button type="submit" class="btn btn-default">Sign up</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

<script type="text/javascript">
$(document).ready(function() {
    // You can enable the add-on via HTML attributes
    // <form data-bv-addons="multilingual, otherAddOn, anotherOne">
    $('#defaultForm')
        .bootstrapValidator({
            addOns: {
                multilingual: {}
            },
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    validators: {
                        notEmpty: {
                        },
                        stringLength: {
                            min: 6,
                            max: 30
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9]+$/
                        },
                        different: {
                            field: 'password',
                            message: {
                                en_US: 'The username and password cannot be the same',
                                vi_VN: 'Mật khẩu và tên đăng nhập phải khác nhau'
                            }
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                        },
                        emailAddress: {
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                        },
                        stringLength: {
                            min: 8
                        },
                        different: {
                            field: 'username',
                            message: function(validator, $field, validatorName) {
                                return {
                                    en_US: 'The password can\'t be same as username',
                                    vi_VN: 'Mật khẩu phải khác tên đăng nhập'
                                };
                            }
                        }
                    }
                },
                birthday: {
                    validators: {
                        notEmpty: {
                        },
                        date: {
                            format: 'YYYY/MM/DD'
                        }
                    }
                },
                gender: {
                    validators: {
                        notEmpty: {
                        }
                    }
                }
            }
        });

    // Change the locale
    $('.setLocaleButton').on('click', function() {
        $('.setLocaleButton').removeClass('btn-primary').addClass('btn-default');
        $(this).removeClass('btn-default').addClass('btn-primary');
        $('#defaultForm').bootstrapValidator('setLocale', $(this).attr('data-locale'));
    });
});
</script>
</body>
</html>